<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login - ATask Monitor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div style="width: 40%;margin: 20px auto 0">
        <form id="loginForm" autocomplete="off">
            <div class="text-center h3">Login</div>
            <div class="form-group">
                <label for="username">用户名</label>
                <input class="form-control" type="text" id="username" title="username">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input class="form-control" type="password" id="password" title="password">
            </div>
            <div style="text-align: right">
                <button onclick="toLogin()" type="button" class="btn btn-primary">Submit</button>
            </div>
        </form>
    </div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function toLogin() {
        $.ajax({
            url: 'toLogin',
            method: 'POST',
            data: {
                username: $('#username').val(),
                password: $('#password').val()
            },
            dataType: "text",
            success: function(data) {
                if(data === 'success') {
                    location.href = 'index.html';
                } else {
                    alert(data);
                    $("#loginForm")[0].reset();
                    $("#username").focus();
                }
            }
        });
    }
</script>
</body>
</html>
